import MyFormUploadButton from '@/components/MyFormUploadButton';
import { createItem, getItemDetails, updateItem } from '@/services/api/assetTypes';
import { AssetTypesResultItem } from '@/services/api/model/assetTypesModel';
import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import React from 'react';
type CreateFormProps = {
  onCancel?: () => void;
  onSubmit?: (values: AssetTypesResultItem) => void;
  itemToken?: string;
  title?: string;
  trigger?: JSX.Element;
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const {
    onSubmit,
    itemToken,
    title = '添加',
    trigger = (
      <Button type="primary">
        <PlusOutlined />
        {title}
      </Button>
    ),
  } = props;
  const onOpenChange = () => {};

  return (
    <ModalForm<AssetTypesResultItem>
      request={async () => {
        if (itemToken) {
          const res = await getItemDetails({ includeAsset: true, token: itemToken });

          return res;
        } else {
          return {};
        }
      }}
      title={`${title}网关类型`}
      modalProps={{
        // 关闭弹框是否销毁 (相当于直接进行了表单重置)
        destroyOnClose: true,
      }}
      trigger={trigger}
      onOpenChange={() => onOpenChange()}
      onFinish={async (values) => {
        console.log(values);
        if (!itemToken) {
          await createItem({
            ...values,
          });
        } else {
          await updateItem({
            ...values,
            token: itemToken,
          });
        }
        if (onSubmit) {
          onSubmit(values);
        }
        message.success('提交成功');
        // 返回true 则关闭
        return true;
      }}
      initialValues={{}}
    >
      <ProForm.Group>
        <ProFormText
          width={'md'}
          label="Token"
          name="token"
          rules={[
            {
              required: true,
              message: '请输入Token',
            },
          ]}
          placeholder="请输入Token"
        />
        <ProFormText
          width={'md'}
          label="名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入名称',
            },
          ]}
          placeholder="请输入名称"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width={'md'}
          label="品牌"
          name="brand"
          rules={[
            {
              required: true,
              message: '请输入品牌',
            },
          ]}
          placeholder="请输入品牌"
        />
        <ProFormText
          width={'md'}
          label="CPU"
          name="cpu"
          rules={[
            {
              required: true,
              message: '请输入CPU',
            },
          ]}
          placeholder="请输入CPU"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width={'md'}
          label="硬盘"
          name="hardDisk"
          rules={[
            {
              required: true,
              message: '请输入硬盘',
            },
          ]}
          placeholder="请输入硬盘"
        />
        <ProFormText
          width={'md'}
          label="内存"
          name="memory"
          rules={[
            {
              required: true,
              message: '请输入内存',
            },
          ]}
          placeholder="请输入内存"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width={'md'}
          label="型号"
          name="model"
          rules={[
            {
              required: true,
              message: '请输入型号',
            },
          ]}
          placeholder="请输入型号"
        />
        <ProFormSelect
          disabled={true}
          width={'md'}
          name="assetCategory"
          label="网关类别"
          initialValue={'Device'}
          options={[
            {
              value: 'Device',
              label: '设备',
            },
          ]}
          placeholder="请选择"
          rules={[{ required: true, message: '请选择' }]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormTextArea width={'md'} label="备注" name="description" placeholder="请输入备注" />
        <Form.Item
          name="imageUrl"
          label="图片"
          rules={[
            {
              required: false,
              message: '请上传',
            },
          ]}
        >
          <MyFormUploadButton></MyFormUploadButton>
        </Form.Item>
      </ProForm.Group>
    </ModalForm>
  );
};

export default CreateForm;
